<template>
<div class="goldcoin">
    <div class="goldcoin-shell">
        <div class="goldcoin-tuic"></div>
         <div class="goldcoin-tc">
         <div class="goldcoin-tc-shell">
             <div class="goldcoin-grzx-shell">
                 <div class="goldcoin-grzx"></div>
            </div>
         <div class="goldcoin-title">
            <p>可以免费兑换心仪产品哦～</p>
        </div>
        <div class="goldcoin-list">
            <ul>
                <li class="goldcoin-list-li">
                    <img src="../../assets/images/goldcoin-list.png" class="goldcoin-list-img">
                    <span class="goldcoin-list-name">奖品1</span>
                </li><li class="goldcoin-list-li">
                    <img src="../../assets/images/goldcoin-list.png" class="goldcoin-list-img">
                    <span class="goldcoin-list-name">奖品1</span>
                </li><li class="goldcoin-list-li">
                    <img src="../../assets/images/goldcoin-list.png" class="goldcoin-list-img">
                    <span class="goldcoin-list-name">奖品1</span>
                </li><li class="goldcoin-list-li">
                    <img src="../../assets/images/goldcoin-list.png" class="goldcoin-list-img">
                    <span class="goldcoin-list-name">奖品1</span>
                </li><li class="goldcoin-list-li">
                    <img src="../../assets/images/goldcoin-list.png" class="goldcoin-list-img">
                    <span class="goldcoin-list-name">奖品1</span>
                </li><li class="goldcoin-list-li">
                    <img src="../../assets/images/goldcoin-list.png" class="goldcoin-list-img">
                    <span class="goldcoin-list-name">奖品1</span>
                </li>
            </ul>
        </div>
        <div class="goldcoin-ps">
            <p>注：所有商品均包邮!</p>
        </div>
        <div class="goldcoin-xhl"></div>
        <div class="goldcoin-xyp"><p>选择心仪的产品（最多4个）</p></div>
         </div>
     </div>
    </div>
</div>

</template>

<script>
export default {
 name:'GoldCoin',
 data: function() {
    return {
      screenWidth: document.body.clientWidth
    };
  },
    created(){
       window.addEventListener("resize", this.handleResize)
    },
    methods:{
        handleResize(){
              if (document.body.clientWidth < 670) {
             this.$router.push({ path: "/goldcoin" });
           }
        }
    }
}
</script>

<style scoped>

.goldcoin{
    background: url(../../assets/images/goldcoin.png)no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100vh;
}

.goldcoin-shell{
    width: 100%;
    height: 100vh;
    position: relative;
}

.goldcoin-tc{
    background: url(../../assets/images/goldcoin-tc.png)no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 2.49rem;
    height: 3.60rem;
}

.goldcoin-grzx{
    background: url(../../assets/images/goldcoin-grzx.png)no-repeat;
    width: 1.40rem;
    height: 0.32rem;
    background-position: 100% 100%;
    background-size: cover;
    margin: 0 auto;
    margin-top: 0.098rem;
}
.goldcoin-title{
        color: #fff;
    font-size: 0.13rem;
    margin-top: 0.31rem;
    text-align: center;
}

.goldcoin-list-li{
       display: inline-block;
    width: 33.3%;
    padding-top: 0.13rem;
}

.goldcoin-list-img{
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    margin: 0 auto;
}

.goldcoin-list-name{
    font-size: 0.09rem;
    color: #fff;
}

.goldcoin-list{
   padding: 0px 0.27rem;
    padding-top: 0.17rem;
    text-align: center;
}

.goldcoin-list-name{
    font-size: 0.09rem;
    color: #fff;
    display: block;
    padding-top: 0.05rem;
}

.goldcoin-ps{
    color: #D9D2FF;
    font-size: 0.064rem;
    padding-top: 0.1rem;
    padding-left: 0.35rem;
}

.goldcoin-xhl{
    background: url(../../assets/images/goldcoin-xhl.png);
    width: 1.03rem;
    height: 0.36rem;
    background-size: cover;
    position: absolute;
    bottom: 0.18rem;
    left: 50%;
    transform: translate(-50%, -50%);
}

.goldcoin-tc-shell{
    width: 100%;
    height: 100%;
    position: relative;
}

.goldcoin-xyp{
    position: absolute;
    bottom: 0.08rem;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.071rem;
    color: #D9D2FF;
}

.goldcoin-tuic{
    position: absolute;
    right: 0.23rem;
    width: 0.34rem;
    height: 0.17rem;
    top: 0.15rem;
    background: url(../../assets/images/goldcoin-tg.png)no-repeat;
background-size: cover;
}

@media (max-width:1200px) {
        /* 1.21
        1.21 */
    .goldcoin-tc{
        width: 3.7rem;
        height: 4.88rem;
    }
    .goldcoin-grzx{
       width: 1.90rem;
       height: 0.43rem;
    }
    .goldcoin-title{
    font-size: 0.16rem;
    margin-top: 0.456rem;
 }
 .goldcoin-list-img{
    width: 0.8rem;
    height: 0.8rem;
}
.goldcoin-ps{
    font-size: 0.09rem;
    padding-top: 0.1rem;
    padding-left: 0.4rem;
}
.goldcoin-xhl {
    width: 1.3rem;
    height: 0.43rem;
    bottom: 0.28rem;
}
.goldcoin-xyp{
    bottom: 0.08rem;
    font-size: 0.099rem;
}
.goldcoin-tuic{
    right: 0.23rem;
    width: 0.6rem;
    height: 0.30rem;
    top: 0.15rem;
}
}

@media (max-width:750px) {
        /* 1.21
        1.21 */
    .goldcoin-tc{
           width: 5.5rem;
           height: 7rem;
    }
    .goldcoin-grzx{
      width: 2.8rem;
      height: 0.64rem;
    }
    .goldcoin-title{
      font-size: 0.26rem;
    margin-top: 0.65rem;
 }
 .goldcoin-list-img{
       width: 1rem;
    height: 1rem;
 }
.goldcoin-ps{
       font-size: 0.14rem;
    padding-top: 0.2rem;
    padding-left: 0.6rem;
}
.goldcoin-xhl {
       width: 1.8rem;
    height: 0.63rem;
    bottom: 0.28rem;
}
.goldcoin-xyp{
       bottom: 0.076rem;
    font-size: 0.14rem;
  }

  .goldcoin-list{
          padding: 0px 0.27rem;
    padding-top: 0.27rem;
  }
  .goldcoin-list-li{
    padding-top: 0.17rem;
}
.goldcoin-list-name[data-v-413ddd23] {
    font-size: 0.15rem;
    padding-top: 0.09rem;
}
.goldcoin-tuic {
    right: 0.23rem;
    width: 0.79rem;
    height: 0.40rem;
    top: 0.15rem;
}
}



</style>